<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script type ="text/javascript" src="../../layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/wangEditor.js"></script>
    <script  type ="text/javascript" src="../../res/js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 400px;

        }
        .a-upload {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }

        .a-upload  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }

    </style>

</head>
<body>

    <div id="right1">
        <form class="layui-form layui-form-pane" id="form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="attachName" id ="attachName" autocomplete="off" placeholder="请输入标题" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">发布日期</label>
                    <div class="layui-input-inline">
                        <input class="layui-input"  id="attachTime" name="attachTime" autocomplete="off" placeholder="请选择发布时间" lay-verify="required">
                    </div>
                    <!--<div class="layui-input-inline">
                        <input class="layui-input"  id="attachValidTime" name="attachValidTime" autocomplete="off" placeholder="请选择有效时间">
                    </div>-->
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="attachValidTime" name="attachValidTime" placeholder=" - 请选择有效日期" lay-verify="required">
                    </div>
                </div>

            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">接收人员(不选则全部发送)</label>
                <div id="test7" class="demo-tree-more"></div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">上传附件</label>
                <a href="javascript:;" class="a-upload">
                    <input type="file" name="fileOne" id="file1">上传文件1
                </a>
                <a id="fileName1"></a>
                <a href="javascript:;" class="a-upload">
                    <input type="file" name="fileTwo" id="file2">上传文件2
                </a>
                <a id="fileName2"></a>
                <a href="javascript:;" class="a-upload">
                    <input type="file" name="fileThree" id="file3">上传文件3
                </a>
                <a id="fileName3"></a>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">正文</label>
                <div class="layui-input-block">
                    <div id="div1" class="toolbar" style=" margin: auto;">
                    </div>
                    <div id="attachContent" name="attachContent" class="text" style=" margin: auto;"> <!--可使用 min-height 实现编辑区域自动增加高度-->
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="submit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>

        </form>
    </div>
    <script type="text/javascript">

        //上传文件文本框显示
        $(".a-upload").on("change","input[id='file1']",function(){
            var filePath=$(this).val();
            var arr=filePath.split('\\');
            var fileName=arr[arr.length-1];
           $("#fileName1").html(fileName);
        })

        $(".a-upload").on("change","input[id='file2']",function(){
            var filePath=$(this).val();
            var arr=filePath.split('\\');
            var fileName=arr[arr.length-1];
            $("#fileName2").html(fileName);
        })

        $(".a-upload").on("change","input[id='file3']",function(){
            var filePath=$(this).val();
            var arr=filePath.split('\\');
            var fileName=arr[arr.length-1];
            $("#fileName3").html(fileName);
        })
       //创建编辑器
        var E = window.wangEditor
        var editor = new E('#div1', '#attachContent')  // 两个参数也可以传入 elem 对象，class 选择器
        editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
        editor.create()
        //
        layui.use(['tree', 'util','form', 'layedit', 'laydate'], function(){
            var form = layui.form
                , layer = layui.layer
                , laydate = layui.laydate
                , tree = layui.tree
                , util = layui.util
                ,data;
                //人员数据
            var url = "../../../atsAttachmentController/selEmpTree";
            $.ajax({
                type : "post",
                url : url,
                async : false,
                success : function(treeEmp){
                    data=treeEmp;
                }


            });



            //开启复选框
            tree.render({
                elem: '#test7'
                ,data: data
                ,id : 'empTree'
                ,showCheckbox: true
                ,operate : function (obj) {
                    var id = data.id;
                }
                

            });
            var attachId = getQueryStringOne("id");
            if(attachId!=null){
                setText(attachId,tree);
            }
            //日期
            laydate.render({
                elem: '#attachTime'
            });
            laydate.render({
                elem: '#attachValidTime'
            });

            //监听指定开关
            form.on('switch(switchTest)', function (data) {
                layer.msg('开关checked：' + (this.checked ? '审核' : '不审核'), {
                    offset: '6px'
                });
                //layer.tips('温馨提示：请注意开关状态', data.othis)

            });

            //监听提交
            form.on('submit(submit)', function (data) {

                var form = new FormData($('#form')[0]);
                var attachType = getQueryStringOne("attachType");

                var  attachContent = editor.txt.html();
                var checkData = tree.getChecked('empTree');
                var empIds = [];//定义一个用来装模块ID的弱类型
                if(checkData!=null){
                    $.each(checkData,function(index,item){
                        $.each(item.children,function(index,item){
                            empIds.push(item.id);//向数组中添加元素
                        });
                    });

                }
                form.append("empIds",empIds);
                form.append("attachId",attachId);
                form.append("attachContent",attachContent);
                form.append("attachType",attachType);
                var load = layer.open({type : 3});
                $.ajax({
                    url : "../../../atsAttachmentController/addOrUpdate",
                    type :"post",
                    data : form,
                    dataType : "json",
                    processData : false,
                    contentType : false,
                    success : function(obj) {
                        layer.close(load);
                        if (obj.num == 1) {
                            //弹出需求
                            layer.msg(obj.msg, {
                                icon : 1,
                                time : 1000
                                //一秒关闭 如果不配置是3秒
                            }, function() {
                                //关闭 层
                                var index = parent.layer
                                    .getFrameIndex(window.name);//得到iframe 层的索引
                                parent.layer.close(index);//关闭改层
                                //刷新主界面
                                parent.location.reload();
                            });
                        } else {
                            layer.close(load);
                            layer.msg(obj.msg);
                        }
                    },
                    error : function(e) {
                        layer.close(load);
                        layer.msg("提交失败");
                    }
                });

                return false;
            });
        })

       //得到地址栏上的参数  可以 是中文
       function getQueryStringOne(key) {
           var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
           var r = window.location.search.substr(1).match(reg);
           if (r != null)
               return decodeURI(r[2]);
           return null;
       }

        /**
         * 根据id设置文本框的值
         * @param attachId
         */
       function setText(attachId,tree){
            var data = {
                attachId : attachId
            }
            var url = "../../../atsAttachmentController/findById";
            $.post(url,data,function(data){
                $("#attachName").val(data.attachName);
                $("#attachTime").val(data.attachTime);
                $("#attachValidTime").val(data.attachValidTime);
                editor.txt.append(data.attachContent);

                var userIds = [];
                $.each(data.atsAttachmentEmps,function (index,item){
                    userIds.push(item.userId);
                } )
                tree.setChecked('empTree',userIds); //批量勾选 节点*!/*/

            },'json');
       }
</script>


</body>
</html>